import { Input } from "antd"
import { forwardRef, Ref, useImperativeHandle, useState } from "react"

import { SFormItem } from "@/components/common"
// import { Select } from "antd"
import ComplexInput from "@/components/common/complexInput"
import { useLocale } from "@/locales"
// import dynamicComponent from "./dynamicImport"

const AccountFlag = (props: any, ref: Ref<unknown> | undefined) => {
	const { options, initValue, changeType, allowClear } = props
	const { newFormat } = useLocale()
	const optionsShow = options || [
		{
			label: newFormat("funds.proxy_name"),
			value: "userName"
		},
		{
			label: newFormat("funds.proxy_member_funds_record.real_name"),
			value: "realName"
		}
	]
	const [field, setField] = useState(initValue || "userName")
	const onTypeChange = (field: string) => {
		setField(field)
		changeType(field)
	}
	useImperativeHandle(ref, () => {
		return {
			setField,
			field
		}
	})
	const defaultNormalize = (value: string) => value.replaceAll(" ", "") || undefined
	return (
		<ComplexInput options={optionsShow} value={field} onTypeChange={onTypeChange}>
			<SFormItem normalize={defaultNormalize} name={field}>
				<Input placeholder={newFormat({ id: "label.please_input" })} allowClear={!!allowClear} />
			</SFormItem>
		</ComplexInput>
	)
}

export default forwardRef(AccountFlag)
